<template>
  <bazi-section title="流年财富参考">
    <view class="containter" v-if="isVip != 1">
      <view class="dayun-box">
        <template v-for="(item, index) in dayunData.customLiuNian">
          <view class="dayun-item" :key="index" @click="liunianClick(item, index)">
            <view class="dayun-year">{{ item.year }}</view>
            <!-- <view class="dayun-info" :class="[liunianIndex == index ? 'dayun-select' : '',]"> -->
            <view class="dayun-info">
              <view class="dayun-ele">
                <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[0])">{{
                  item.ganZhi[0]
                }}</view>
                <view class="dayun-shishen">{{ shishenEllipsis(item.shiShen[0]) }}</view>
              </view>
              <view class="dayun-ele">
                <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[1])">{{
                  item.ganZhi[1]
                }}</view>
                <view class="dayun-shishen">{{ shishenEllipsis(item.shiShen[1]) }}</view>
              </view>
              <view class="caiku-tips">
                <caiku-icon :showCai="item.wealthStrong"></caiku-icon>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <view v-else>
      <no-vip></no-vip>
    </view>
  </bazi-section>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import wuxingColor from "@/utils/wuxing.js";
import caikuIcon from "./caiku-icon.vue";
import { EventBus } from "@/main.js";
import { shishenEllipsis } from "@/utils/index.js";
export default {
  components: {
    baziSection,
    caikuIcon,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  data() {
    return {
      isOpen: true,
      baziResult: this.result,
      dayunData: [],
      liunianIndex: undefined,
      shishenEllipsis: shishenEllipsis,
    };
  },
  mounted() {
    EventBus.$on("dayuncaifu", (param) => {
      this.liunianIndex = 0;
      this.dayunData = param.dayunData;
      // let data = this.dayunData.customLiuNian[0];
      // EventBus.$emit('liunian', {
      //   liunianData: data
      // })
    });
    this.isOpen = true;
  },
  beforeDestroy() {
    EventBus.$off("dayuncaifu");
  },
  methods: {
    // 对应五行信息
    fiveElementInfo(str) {
      let { color } = wuxingColor.getGanzhiWuxingColorInfo(str);
      return `color: ${color}`;
    },
    liunianClick(data, index) {
      if (this.liunianIndex == index) return;
      // this.liunianIndex = index
      // EventBus.$emit('liunian', {
      //   liunianData: data
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar_containter {
  width: 100%;
  box-sizing: border-box;
}

.dayun-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 28rpx;

  .dayun-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20%;
    box-sizing: border-box;

    .dayun-year {
      width: 100%;
      font-size: 20rpx;
      color: #787878;
      background-color: #f0f0f0;
      text-align: center;
    }

    .dayun-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6rpx;
      margin: 8rpx;
      position: relative;
      .dayun-ele {
        display: flex;
        flex-direction: row;
        line-height: 44rpx;

        .dayun-ganzhi {
          font-size: 40rpx;
          padding-right: 4rpx;
        }

        .dayun-shishen {
          font-size: 20rpx;
          color: #4b240d;
        }
      }
    }
  }
}
.dayun-select {
  border-radius: 12rpx;
  border: 2rpx solid #4b240d;
}
.caiku-tips {
  position: absolute;
  right: -34rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
